<template>
  <div id="listen">
    <!-- ---------------顶部横幅------------ -->
    <div class="topBanner">
    <router-link to="/home">
      <img
        src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
        alt=""
      />
    </router-link>
    <router-link to="/search">
      <van-search placeholder="搜索" shape="round" />
    </router-link>
      <div class="openApp">打开APP</div>
    </div>
    <div class="tab">
      <van-tabs v-model:active="active" @click-tab="onClickTab" color="red">
        <van-tab
          class="fu"
          v-for="item in ListenList"
          :title="item.title"
          :key="item.title"
        >
          <!-- 点击箭头显示出来的菜单 -->
          <div class="jiantou">
            <span v-if="showMenu">请选择听单</span>
            <div class="icn">
              <van-icon
                @click="changeShowMenu"
                v-if="showMenu"
                name="arrow-up"
                size="10"
                style="margin-right: 20px; margin-left: 15px; color: coral"
              />
              <van-icon
                @click="changeShowMenu"
                v-else
                name="arrow-down"
                size="10"
                style="
                  margin-right: 20px;
                  margin-left: 15px;
                  color: rgb(211, 210, 209);
                "
              />
            </div>
          </div>
          <!-- 显示出来的菜单 里面的按钮 -->
          <div v-if="showMenu" class="buttons">
            <button
              @click="changeTitle(but.title, index)"
              v-for="(but, index) in ListenList"
              :key="but.title"
            >
              {{ but.title }}
            </button>
          </div>
          <!-- 某个分类下的听单列表 -->
          <div v-for="listen in SomeListenList" :key="listen.id">
            <a
              :href="`https://m.ximalaya.com/revision/subject/category${listen.url}`"
            >
              <van-card
                class="card"
                :title="listen.title"
                :thumb="listen.coverPathSmall"
                :desc="listen.intro"
              >
                <template #tags>
                  <van-icon
                    name="live"
                    size="10"
                    style="
                      margin-left: 10px;
                      margin-top: 30px;
                      margin-right: 25px;
                      background-color: white;
                    "
                    >{{ listen.pageView }}</van-icon
                  >

                  <van-icon name="tv-o" size="10">{{
                    '2023 - 8 - 12' + '更新'
                  }}</van-icon>
                </template>
              </van-card>
            </a>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  watch,
  ref,
  reactive,
  onMounted,
} from 'vue';

export default defineComponent({
  name: 'Listen',
});
</script>

<script setup lang="ts">
//引入组件
import { Tab, Tabs, Card, icon } from 'vant';
//引入请求函数
import {
  reqGetListenList,
  reqGetSomeListenList,
  reqGoDetail,
} from '@/api/LNFlisten.ts';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();

const active = ref(0);

//定义一个控制菜单显示的变量
const showMenu = ref(false);

//定义听单分类列表
const ListenList = ref([]);

//存储某个分类下停单列表数据
const SomeListenList = ref([]);

//定义一个对象名为titleMap的映射对象，将每个中文标题作为键，对应的拼音作为值。
const titleMap = {
  有声书: 'youshengshu',
  热门: 'remen',
  音乐: 'yinyue',
  相声评书: 'xiangsheng',
  情感生活: 'qinggan',
  娱乐: 'yule',
  人文: 'renwen',
  儿童: 'ertong',
  影视: 'yingshi',
  个人成长: 'gerenchengzhang',
  历史: 'lishi',
  商业财经: 'shangye',
  外语: 'waiyu',
  头条: 'toutiao',
  科技: 'keji',
  健康养生: 'jiankang',
  旅游: 'lvyou',
  时尚生活: 'shishang',
  广播剧: 'guangbojv',
  汽车: 'qiche',
  少儿素养: 'ertongjiaoyu',
  脱口秀: 'tuokouxiu',
  播客: 'boke',
  二次元: 'erciyuan',
  哲学心灵: 'zhexue',
  教育培训: 'jiaoyupeixun',
};

//--------点击箭头 显示菜单或者隐藏菜单-------
const changeShowMenu = () => {
  showMenu.value = !showMenu.value;
};

//-----封装一个请求获取听单列表的函数------
const getListenList = async () => {
  const result = await reqGetListenList();
  console.log(result.data.categories);

  //存储请求回来的数据
  ListenList.value = result.data.categories;
  console.log(ListenList.value);
};

onMounted(() => {
  //挂载时发送请求获取数据
  getListenList();
  getSomeListenList('youshengshu');
});

//点击切换标签时触发
const onClickTab = async (e) => {
  console.log(e);

  //需要将e.title 转成拼音

  let title = titleMap[e.title] || '';
  getSomeListenList(title);
};

//点击下拉菜单里面的分类听单按钮 显示相应的二级听单
const changeTitle = (title, index) => {
  //转换成拼音

  //发送请求获取相应的二级听单
  getSomeListenList(titleMap[title]);
  //改变标签栏的索引
  active.value = index;
  //将菜单栏隐藏
  showMenu.value = !showMenu.value;
};

//点击下面听单
const goDetail = async (url) => {
  // console.log(666);
  //跳转到详情页面
  // console.log(url);
  // router.push(`https://m.ximalaya.com/revision/subject/category${url}`);
  // try {
  //   const res = await reqGoDetail(url);
  //   console.log(res);
  // } catch (error) {
  //   console.log(error);

  // }
  console.log(url);

  router.push({
    path: `https://m.ximalaya.com/revision/subject/category${url}`,
  });
};

//-----封装一个切换标签时下面的停单跟随动态变换的函数------

const getSomeListenList = async (title) => {
  const result = await reqGetSomeListenList(title, 1, 20);
  console.log(result);
  //将数据存储
  SomeListenList.value = result.data.subjects;
};
</script>

<style scoped lang="less">
.topBanner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 15px;
  padding-top: 15px;

  height: 50px;
  width: 100%;
  img {
    width: 70px;
    height: 19px;
  }
  .openApp {
    height: 29px;
    width: 88px;
    line-height: 29px;
    text-align: center;
    font-size: 12px;
    // background-color: #fa2800;
    border: 1px solid #fa2800;
    color: #fa2800;
    border-radius: 15px;
  }
}
.tab {
  // margin-top: 50px;
  border-bottom: 1px solid #ccc;
}
.card {
  margin-top: 20px;
  margin-bottom: 1px solid #ccc;
}
.fu {
  position: relative;
}

.jiantou span {
  top: 50px;
  left: -1px;
  position: fixed;
  display: inline-block;
  text-align: left;
  width: 90%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  z-index: 999;
  color: #e1dfdf;
  background-color: rgb(255, 255, 255);
}
.jiantou .icn {
  position: fixed;
  top: 50px;
  right: -1px;
  text-align: center;
  width: 50px;
  height: 40px;
  background-color: white;
  border-left: 0.5px solid #ccc;
}

.buttons {
  position: absolute;
  height: 300px;
  overflow: scroll;
  top: -25px;
  right: 0px;
  z-index: 999;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: white;
}
.buttons button {
  font-size: 15px;
  margin: 10px;
  width: 100px;
}
</style>
